import { getUserAppletDetail, modUserApplet } from "@/api/modules/applet/userApplet";
import { serviceDetail, serviceStart, serviceStop } from "@/api/modules/service/service";
import Navigation from "@/components/Frame/Navigation";
import PageHeader from "@/components/Frame/PageHeader";
import { useRoute } from "vue-router";
import StatusDetail from "./statusDetail";
import RunningLog from "@/components/Sansan/Model/components/RunningLog.vue";
import BasicDialog from "./detailDialog";
import { showTips } from "@/utils/util";
import OnlineStatus from "@/components/Sansan/OnlineStatus/OnlineStatus";
import { ServiceStatusTypes } from "@/enums/statusEnum";
import { getDictObj } from "@/utils/cacheUtil";

export default defineComponent({
	setup() {
		const serviceStatusLabels = ref<any>({});
		const route = useRoute();
		const state = reactive<any>({ basicDetail: {}, serverDetail: {} });
		onMounted(async () => {
			init();
			serviceStatusLabels.value = await getDictObj("service_status");
		});
		const init = async () => {
			let { result } = await getUserAppletDetail({ id: route.query.id as string });
			state.basicDetail = result;
			let res = await serviceDetail({ id: state.basicDetail.svcId });
			state.serverDetail = res.result;
		};
		const navList = reactive([
			{ label: "应用状态", value: "status" },
			{ label: "应用日志", value: "logger" }
		]);
		const active = ref<string>("");
		const changeView = (info: { label: string; value: string }) => {
			active.value = info.value;
		};
		const detailDialog = reactive<any>({
			title: "修改应用",
			visible: false
		});
		const handleFn = (fn: string) => {
			switch (fn) {
				case "mod":
					detailDialog.visible = true;
					break;
				case "start":
					startService();
					break;
				case "stop":
					stopService();
					break;
			}
		};
		const startService = async () => {
			let { code } = await serviceStart({ id: state.basicDetail.svcId });
			showTips(code, "启动应用");
		};
		const stopService = async () => {
			let { code } = await serviceStop({ id: state.basicDetail.svcId });
			showTips(code, "停止应用");
		};
		const submitAdd = async () => {
			let res = await modUserApplet({ ...state.basicDetail });
			let ok = showTips(res.code, "添加应用");
			if (ok) {
				detailDialog.visible = false;
			}
		};
		return () => {
			return (
				<div>
					<BasicDialog
						width="800px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={state.basicDetail}
						onSubmit={submitAdd}
					></BasicDialog>
					<PageHeader
						showBackText={false}
						v-slots={{
							operate: () => {
								return (
									<>
										<el-button onClick={() => handleFn("mod")}>编辑</el-button>
										<el-button class="iconfont iconbx-skip-next-circle" onClick={() => handleFn("start")}>
											启动应用
										</el-button>
										<el-button class="iconfont iconbx-stop-circle" onClick={() => handleFn("stop")}>
											停止应用
										</el-button>
									</>
								);
							}
						}}
					>
						<span>{state.basicDetail.name}</span>
						<OnlineStatus
							v-model={state.serverDetail.status}
							labels={serviceStatusLabels.value}
							types={ServiceStatusTypes}
							onlineLabel="未知"
							offlineLabel="未知"
							class="ml-4 mr-4"
						/>
						<el-link
							class="iconfont iconbx-sync ml-2"
							type="primary"
							onClick={() => {
								init();
							}}
						>
							刷新
						</el-link>
					</PageHeader>
					<Navigation navList={navList} onChange={changeView} />
					<div class="bg-white detail-type-detail">
						{active.value == "status" ? (
							<StatusDetail
								basicDetail={state.basicDetail}
								serverDetail={state.serverDetail}
								onClickDetailMod={() => handleFn("mod")}
							/>
						) : (
							<RunningLog class="pt-6" id={state.basicDetail?.svcId} />
						)}
					</div>
				</div>
			);
		};
	}
});
